<template>
    <b-big-card :title="'公告列表'">
        <template #operate>
            <b-button type="primary" plain icon="EditPen">编辑公告</b-button>
        </template>
        <template #content>
            <b-table :columns="columns" :tableData="tableData"></b-table>
        </template>
    </b-big-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BBigCard from '@/components/BBigCard.vue';
import BButton from '@/components/BButton.vue';
import BTable from '@/components/BTable.vue';

let columns = ref([
    {
        prop: 'date',
        label: '序号',
        sortable: 'custom',
        width: '180'
    },
    {
        prop: 'title',
        label: '标题',
        width: '180'
    },
    {
        prop: 'address',
        label: '发件网点'
    },
    {
        prop: 'fajianren',
        label: '发件人'
    },
    {
        prop: 'yuedu',
        label: '是否阅读'
    },
    {
        prop: 'fajianshijian',
        label: '发件时间'
    },
])

let tableData = ref([
    {
        date: '1',
        title: '标题1',
        address: '发件网点1',
        fajianren: '发件人1',
        yuedu: '是',
        fajianshijian: '2022-01-01 10:00:00'
    },
    {
        date: '2',
        title: '标题2',
        address: '发件网点2',
        fajianren: '发件人2',
        yuedu: '否',
        fajianshijian: '2022-01-02 11:00:00'
    },
    {
        date: '3',
        title: '标题3',
        address: '发件网点3',
        fajianren: '发件人3',
        yuedu: '是',
        fajianshijian: '2022-01-03 12:00:00'
    },
    {
        date: '4',
        title: '标题4',
        address: '发件网点4',
        fajianren: '发件人4',
        yuedu: '否',
        fajianshijian: '2022-01-04 13:00:00'
    },
    {
        date: '5',
        title: '标题5',
        address: '发件网点5',
        fajianren: '发件人5',
        yuedu: '是',
        fajianshijian: '2022-01-05 14:00:00'
    },
    {
        date: '6',
        title: '标题6',
        address: '发件网点6',
        fajianren: '发件人6',
        yuedu: '否',
        fajianshijian: '2022-01-06 15:00:00'
    },
    {
        date: '7',
        title: '标题7',
        address: '发件网点7',
        fajianren: '发件人7',
        yuedu: '是',
        fajianshijian: '2022-01-07 16:00:00'
    },
    {
        date: '8',
        title: '标题8',
        address: '发件网点8',
        fajianren: '发件人8',
        yuedu: '否',
        fajianshijian: '2022-01-08 17:00:00'
    },
    {
        date: '9',
        title: '标题9',
        address: '发件网点9',
        fajianren: '发件人9',
        yuedu: '是',
        fajianshijian: '2022-01-09 18:00:00'
    },
    {
        date: '10',
        title: '标题10',
        address: '发件网点10',
        fajianren: '发件人10',
        yuedu: '否',
        fajianshijian: '2022-01-10 19:00:00'
    },
])

</script>

<style scoped lang='scss'></style>
